<template>
    <div class="archive">
        <div class="title">
            <h3>全公司</h3>
            <el-date-picker v-model="value3" type="year" placeholder="Pick a year" @change="yearchange" />
        </div>
        <div class="titlecontent" v-show="flagShow" v-for="item in titleData">
            <div class="shebaobaobiao"
                style="display: flex;align-items: center;justify-content: space-between;width: 15%;">
                <div style="cursor: pointer;" @click="showTable">
                    <svg t="1715568394192" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4228" width="24" height="24">
                        <path
                            d="M360.96 839.68c-6.656 0-13.312-2.56-17.92-7.68-10.24-10.24-10.24-26.112 0-36.352l284.16-284.16L343.04 227.84c-10.24-10.24-10.24-26.112 0-36.352s26.112-10.24 36.352 0l302.08 302.08c10.24 10.24 10.24 26.112 0 36.352l-302.08 302.08c-5.12 5.12-11.776 7.68-18.432 7.68z"
                            fill="#231815" p-id="4229"></path>
                    </svg>
                </div>
                <div style="margin-right: 40px;">
                    <div style="margin-bottom: 10px;">社保报表 <span style="font-size: 13px;color: #999;">202301</span>
                    </div>
                    <div style="margin-bottom: 10px;">社保报表</div>
                </div>
            </div>
            <div class="shebaobaobiao"
                style="display: flex;align-items: center;justify-content: space-between;width: 7%;margin-left: 45px;">
                <div>
                    <div style="margin-bottom: 10px;color: #999;font-size: 14px;">企业缴纳</div>
                    <div style="margin-bottom: 10px;font-size: 20px;">{{ item.enterprisePayment }}</div>
                </div>
            </div>
            <div class="shebaobaobiao"
                style="display: flex;align-items: center;justify-content: space-between;width: 7%;margin-left: 45px;">
                <div>
                    <div style="margin-bottom: 10px;color: #999;font-size: 14px;">个人缴纳</div>
                    <div style="margin-bottom: 10px;font-size: 20px;">{{ item.personalPayment }}</div>
                </div>
            </div>
            <div class="shebaobaobiao"
                style="display: flex;align-items: center;justify-content: space-between;width: 7%;margin-left: 45px;">
                <div>
                    <div style="margin-bottom: 10px;color: #999;font-size: 14px;">合计</div>
                    <div style="margin-bottom: 10px;font-size: 20px;">{{ titleData[0].total }}</div>
                </div>
            </div>
        </div>
        <div v-show="showTables" class="tablecontent">
            <ReporTable :ReportTable="ReportTable" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getSocialArchiveList, getSocialTable } from '@/api/Socialtable'
import ReporTable from '@/components/Social/ReporTable.vue';
const value3: any = ref('')
let flagShow = ref(false)
let titleData: any = ref([])
let showTables = ref(false)
let ReportTable = ref([])
const yearchange = () => {
    getSocialArchiveList(value3.value.getFullYear()).then((res: any) => {
        if (res.data.data.length == 0) {
            flagShow.value = false
            console.log(123);
            showTables.value = false
        } else {
            flagShow.value = true
            titleData.value = res.data.data
        }
    })

}
const showTable = () => {
    showTables.value = !showTables.value
    getSocialTable(titleData.value[0].yearsMonth).then((res1: any) => {
        ReportTable.value = res1.data.data
    })
}
</script>

<style scoped>
@import '@/assets/Report.css'
</style>